<!-- views/admin/DecisionConsulting.vue -->
<template>
    <!-- 搜索区域 -->
    <div class="container" style="margin-top: 30px">
    <el-row :gutter="20">
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" 
                 v-show="showSearch" label-width="73px">
          <el-form-item label="关键词搜索" prop="keyword">
            <el-input v-model="queryParams.keyword" placeholder="请输入成果名称或类别" 
                      clearable style="width: 350px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
     
        <!-- 操作按钮区域 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="EditPen" size="mini" :disabled="single"  @click="handleUpdate" >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="consultingId" label="ID" width="100" />
      <el-table-column prop="username" label="姓名" width="150"/>
      <el-table-column prop="consultingResultName" label="成果名称" width="280" />
      <el-table-column prop="consultingCategory" label="类别" width="280" />
      <el-table-column prop="consultingScore" label="分值" width="250" />
      <el-table-column prop="consultingNotes" label="备注" width="350" />
    </el-table>

    <!-- 新增/修改对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="38%">
      <el-form ref="formRef" :model="formData" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="姓名" prop="username" required>
              <el-input v-model="formData.username" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="成果名称" prop="consultingResultName" required>
              <el-input v-model="formData.consultingResultName" placeholder="请输入成果名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类别" prop="consultingCategory" required>
              <el-input v-model="formData.consultingCategory" placeholder="请输入类别" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分值" prop="consultingScore" required>
              <el-input-number v-model="formData.consultingScore" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="consultingNotes">
              <el-input v-model="formData.consultingNotes" type="textarea" placeholder="请填写内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页组件 -->
    <Pagination v-model="queryParams" :total="total" @change="handleChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Pagination from '@/components/Pagination/index.vue';
import { getConsultingList, deleteConsulting, saveConsulting, updateConsulting } from "@/api/decisionConsulting"; 

//控制搜索区域显示
const showSearch = ref(true);

// 表格数据
const tableData = ref([]);
const total = ref(0);

// 查询参数
const queryParams = reactive({
  keyword: '',
  currentPage: 1,
  pageSize: 10
});

// 表单相关
const dialogVisible = ref(false);
const dialogTitle = ref('新增决策咨询');
const formData = reactive({
  consultingId: null,
  username:'',
  consultingResultName: '',
  consultingCategory: '',
  consultingScore: 0,
  consultingNotes: ''
});


// 选择相关
const selectedRows = ref([]);
const single = ref(true);
const multiple = ref(true);
/** 数据查询 */
const handleQuery = async () => {
  try {
    const res = await getConsultingList(queryParams);
    console.log('查询结果:', res.data);
    tableData.value = res.data.data;
    total.value = res.data.total;
  } catch (error) {
    ElMessage.error('查询失败：' + error.message);
  }
};

/** 重置查询 */
const resetQuery = () => {
  queryParams.keyword = '';
  handleQuery();
};

/** 打开新增对话框 */
function handleAdd() {
  resetForm();
  dialogTitle.value = '新增决策咨询';
  dialogVisible.value = true;
  console.log('窗口');
  
   console.log('对话框状态:', dialogVisible.value); // 添加调试日志
   
};

/** 打开修改对话框 */
const handleUpdate = () => {
  if (selectedRows.value.length !== 1) {
    ElMessage.warning('请选择一条记录进行修改');
    return;
  }
  Object.assign(formData, selectedRows.value[0]);
  dialogTitle.value = '修改决策咨询';
  dialogVisible.value = true;
};

/** 提交表单 */
const handleSubmit = async () => {
  try {
    if (formData.consultingId) {
      await updateConsulting(formData.consultingId, formData);
    } else {
      await saveConsulting(formData);
    }
    ElMessage.success('操作成功');
    dialogVisible.value = false;
    await handleQuery();
  } catch (error) {
    ElMessage.error('操作失败：' + error.message);
  }
};

/** 批量删除 */
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录');
    return;
  }

  try {
    await ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const ids = selectedRows.value.map(item => item.consultingId);
    await deleteConsulting(ids);
    ElMessage.success('删除成功');
    await handleQuery();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败：' + error.message);
    }
  }
};

/** 分页变化处理 */
const handleChange = (newPage, newPageSize) => {
  queryParams.currentPage = newPage;
  queryParams.pageSize = newPageSize;
  handleQuery();
};

/** 表格选择变化 */
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
  single.value = selection.length !== 1;// 未选中1行时禁用修改按钮
  multiple.value = !selection.length;// 未选中任何行时禁用删除按钮
};

/** 重置表单 */
const resetForm = () => {
  // if (formRef.value) {
  //   formRef.value.resetFields()
  // }
  Object.assign(formData, {
    consultingId: null,
    username: '', // 新增 username 字段
    consultingResultName: '',
    consultingCategory: '',
    consultingScore: 0,
    consultingNotes: ''
  });
  // formData.consultingId = null;
  // formData.username = '';
  // formData.consultingResultName = '';
  // formData.consultingCategory = '';
  // formData.consultingScore = 0;
  // formData.consultingNotes = '';
};

// 初始化加载数据
onMounted(handleQuery);
</script>

<style scoped>
.el-input__inner {
  margin-left: 2px;
}
/* 优化表格行高 */
.el-table :deep(.el-table__row) {
  line-height: 36px;
}
/* 对话框表单项间距 */
.el-form-item {
  margin-bottom: 18px;
}
</style>


